<script
	lang="ts"
	setup
>
import { userBalanceDetailGet, userBalanceGet, userIdGet } from '@/api'
import { GENDER, USER_AUTH_STATUS_MAP, USER_AUTH_STATUS_MAP_COLOR, USER_BALANCE_STATUS } from '@/const/user'
import type { IUserBalanceGet } from '@/typed/request'
import type { OUserBalanceDetailGetItem, OUserBalanceGet, OUserIdGet } from '@/typed/response'
import {
	OUserBalanceDetailGetItemValue,
	OUserBalanceGetValue,
	OUserIdGetUserMarginValue,
	OUserIdGetValue
} from '@/typed/response.value'
import { renderMaybeNull } from '@/utils';
import { NAvatar, NTag } from 'naive-ui'
import { ref, watch } from 'vue'

interface IProps {
	show: boolean;
	id: string;
	width?: number | string;
}

const emit = defineEmits(['update:show'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})
const userDetail = ref<OUserIdGet>({
	...OUserIdGetValue,
	margin: {
		...OUserIdGetUserMarginValue
	}
})
const userBalance = ref<OUserBalanceGet>({ ...OUserBalanceGetValue })
const userBalanceDetail = ref<OUserBalanceDetailGetItem>({ ...OUserBalanceDetailGetItemValue })
const userBalanceMap = ref<IUserBalanceGet>({ userId: '' })
const userBalanceDetailMap = ref<OUserBalanceDetailGetItem>({})

// const activeDetailTab = ref('1')

watch(() => props.id, async () => {
	if (props.id) {
		await getUserInfo(props.id)
		await getUserBalance(props.id)
		await getUserBalanceDetail(props.id)
	}
})

function onUpdateShow(show: boolean) {
	emit('update:show', show)
}

async function getUserInfo(id: string) {
	const { data } = await userIdGet(id)
	if (data) {
		userDetail.value = data;
	}
}

async function getUserBalance(id: string) {
	userBalanceMap.value.userId = id
	const { data } = await userBalanceGet(userBalanceMap.value)
	if (data) {
		userBalance.value = data;
	}
}

async function getUserBalanceDetail(id: string) {
	userBalanceDetailMap.value.userId = id
	const { data } = await userBalanceDetailGet(userBalanceDetailMap.value)
	if (data) {
		userBalanceDetail.value = data;
	}
}

</script>

<template>
	<n-drawer
		:show="show"
		:width="width"
		close-on-esc
		@update:show="onUpdateShow"
	>
		<n-drawer-content closable>
			<template #header>
				<div class="drawerHeader">
					<n-avatar
						:size="100"
						:src="userDetail.avatarUrl"
						round
					/>
					<div class="flex">
						<div class="info">
							<div class="name">昵称：{{ renderMaybeNull(userDetail.name) }}</div>
							<div class="desc">手机号：{{ renderMaybeNull(userDetail.phone) }}</div>
							<div class="desc">邮箱：{{ renderMaybeNull(userDetail.email) }}</div>
						</div>
					</div>
					<div class="right">
						<n-tag :type="USER_AUTH_STATUS_MAP_COLOR[userDetail.realNameAuthStatus]">
							{{ USER_AUTH_STATUS_MAP[userDetail.realNameAuthStatus] }}
						</n-tag>
					</div>
				</div>
			</template>
			<section>
				<h3 class="infoTitle">基本信息</h3>
				<div>
					<div class="infoItem">
						<div class="label">粉丝数量：</div>
						<div class="value">{{ renderMaybeNull(userDetail.fansNum) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">性别：</div>
						<div class="value">
							{{ GENDER[userDetail.gender] }}
						</div>
					</div>
					<div class="infoItem">
						<div class="label">发布时审核：</div>
						<div class="value">{{ userDetail.auditSwitch ? '已开启审核' : '不需要审核' }}</div>
					</div>
					<div class="infoItem">
						<div class="label">国家：</div>
						<div class="value">{{ renderMaybeNull(userDetail.country) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">省份：</div>
						<div class="value">{{ renderMaybeNull(userDetail.province) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">城市：</div>
						<div class="value">{{ renderMaybeNull(userDetail.city) }}</div>
					</div>
				</div>
				<h3 class="infoTitle">资金信息</h3>

				<div>
					<div class="infoItem">
						<div class="label">余额</div>
						<div class="value">{{ userBalance.amount }}</div>
					</div>
					<div class="infoItem">
						<div class="label">冻结</div>
						<div class="value">{{ userBalance.frozen }}</div>
					</div>
					<div class="infoItem">
						<div class="label">状态</div>
						<div class="value">{{ USER_BALANCE_STATUS[userBalance.status] }}</div>
					</div>
				</div>
			</section>
		</n-drawer-content>
	</n-drawer>
</template>

<style
	lang="less"
	scoped
>
.drawerHeader {
	display: flex;
	align-items: stretch;

	:deep(.n-avatar) {
		flex-shrink: 0;
	}

	.flex {
		flex-grow: 1;
		margin-left: 20px;
		display: flex;
		align-items: center;
		width: 0;

		.info {
			width: 100%;
		}

		.desc {
			margin-top: 10px;
			font-size: 14px;
		}
	}

	.right {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 14px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
}

.infoTitle {
	margin-top: 20px;
	margin-bottom: 10px;
}

.infoItem {
	display: flex;
	line-height: 1.5;
	margin-bottom: 10px;
	font-size: 14px;

	.label {
		width: 100px;
		flex-shrink: 0;
	}

	.value {
		color: var(--n-close-icon-color-pressed);
	}
}
</style>
